<template>
  <div>
    <div class="mainBox">

    </div>
    <div class="chartBox">
      <el-row>
        <el-col :span="24" style="padding-left:10px;">
          <div class="chart" v-loading="echartsLoading">
            <div class="flex">
              <h3>
                <label>&nbsp;</label>公司产业收入占比</h3>
              <el-form :inline="true" :model="dataTime" ref="ruleForm" label-width="110px" class="formBox">
                <el-form-item label="选择日期" prop="name">
                  <el-date-picker unlink-panels value-format="yyyy-MM-dd" v-model="dataTime.value" type="daterange" range-separator="至" :start-placeholder="startTime" :end-placeholder="endTime" @change="echartsTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="secondRow_formItem">
                  <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
              </el-form>
            </div>

            <div ref="echarts_1" :style="{ height: '302px' }"></div>
          </div>
        </el-col>
<el-col :span="24" style="padding-left:10px;">
          <div class="chart" v-loading="echartsLoading1">
            <div class="flex">
              <h3>
                <label>&nbsp;</label>会员消费占比</h3>
              <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="formBox">
                <el-form-item label="会员账户" prop="count">
                  <el-input placeholder="请输入会员账户" v-model="ruleForm.count"></el-input>
                </el-form-item>
                <el-form-item label="选择日期" prop="name">
                  <el-date-picker unlink-panels  v-model="ruleForm.data" @change="echartsTime1" value-format="yyyy-MM-dd" type="daterange" range-separator="至" :start-placeholder="startTime1" :end-placeholder="endTime1">
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="secondRow_formItem">
                  <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="nodata" v-show="no_date"><span>暂无数据</span></div>
            <div ref="echarts_2" :style="{ height: '302px' }"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="chartBox">
      <el-row>
        
      </el-row>
    </div>
  </div>
</template>

<script>
import { getEnterStatistics,vip } from "@/api/user";

export default {
  data() {
    var checkPhone = (rule, value, callback) => {

      if (!value) {
        callback(new Error("手机号不能为空！"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机格式有误"));
      } else {
        callback();
      }
    };

    return {
      startTime: "",
      endTime: "",
       startTime1: "",
       no_date:true,
      endTime1: "",
      echartsLoading: true,
      echartsLoading1:false,
      ruleForm: {
        data: "",
        count: ""
      },
 
      dataTime: {
        value: ""
      },
      rules: {
        count: [
          {
            validator: checkPhone,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    getEnterStatistics() {
      let self = this;
      var echarts_1 = self.$refs.echarts_1;
      var myChart1 = self.$echarts.init(echarts_1);
      getEnterStatistics({
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code == 200) {
          this.echartsLoading = false;
          let data = [];
          let name = res.data;
          for (var i = 0; i < name.length; i++) {
            data = data.concat(name[i].name);
     
          }

          myChart1.setOption({
            legend: {
              orient: "vertical",
              right: "10%",
              top:"10%",
              data: data
            },
            series: [
              {
                center: ["40%", "60%"],
                type: "pie",
                // radius: "75%",
                name: "",
                label: {
                  normal: {
                    formatter: "{a|{a}}\n  {b|{b}：}{c}({d})%",
                    rich: {
                      a: {
                        color: "#999",
                        align: "center"
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      }
                    }
                  }
                },
                data: res.data,
                itemStyle: {
                  normal: {
                    color: function(params) {
                      //自定义颜色
                      var colorList = [
                        "#73A0FA",
                        "#83D0EF",
                        "#EB7E65",
                        "#F7C739",
                        "#7585A2",
                        "#BA55D3",
                        "#9AFF9A",
                        "#8FBC8F",
                        "#7FFFD4",
                        "#7FFF00",
                        "#7F7F7F",
                        "#7EC0EE"

                      ];
                      return colorList[params.dataIndex];
                    }
                  }
                }
              }
            ]
          });
        } else {
          this.$message.error(res.msg);
          this.echartsLoading = false;
        }
      });
    },

    echartsTime(val) {
      this.startTime = val[0];
      this.endTime = val[1];
    },
    echartsTime1(val){
     this.startTime1 = val[0];
      this.endTime1 = val[1];
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var year1 = date.getFullYear() - 1;
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.startTime = year1 + seperator1 + month + seperator1 + strDate;
      this.endTime = year + seperator1 + month + seperator1 + strDate;
        this.startTime1 = year1 + seperator1 + month + seperator1 + strDate;
      this.endTime1 = year + seperator1 + month + seperator1 + strDate;
    },

    submitForm(formName) {
  
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getDateEnterStatistics()
        } else {
        
          return false;
        }
      });
    },

    query() {
      this.getEnterStatistics();
    },
    getDateEnterStatistics() {
      let self = this;
      this.echartsLoading1 = true;
       var echarts_2 = self.$refs.echarts_2;
       var myChart2 = self.$echarts.init(echarts_2);
      vip({
        startTime: this.startTime1,
        endTime: this.endTime1,
        memberId:this.ruleForm.count
      }).then(res => {
        if (res.code == 200) {
            this.echartsLoading1 = false;
            this.no_date=false
          let data = [];
          let name = res.data;
          for (var i = 0; i < name.length; i++) {
            data = data.concat(name[i].name);
          }
          myChart2.setOption({
            legend: {
              orient: "vertical",
              right: "10%",
              top:"10%",
              data: data
            },
            series: [
              {
                center: ["40%", "60%"],
                type: "pie",
                // radius: "75%",
                name: "",
                label: {
                  normal: {
                    formatter: "{a|{a}}\n  {b|{b}：}{c}({d})%",
                    rich: {
                      a: {
                        color: "#999",
                        align: "center"
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      }
                    }
                  }
                },
                data: res.data,
                itemStyle: {
                  normal: {
                    color: function(params) {
                      //自定义颜色
                      var colorList = [
                        // "#73A0FA",
                        // "#83D0EF",
                        "#EB7E65",
                        "#F7C739",
                        "#7585A2",
                        "#BA55D3",
                        "#9AFF9A",
                        "#8FBC8F",
                        "#7FFFD4",
                        "#7FFF00",
                        "#7F7F7F",
                        "#7EC0EE"

                      ];
                      return colorList[params.dataIndex];
                    }
                  }
                }
              }
            ]
          });
        }else{
          this.$message.error(res.msg);
            this.echartsLoading1 = false;          
        }
      });
    }
  },
  mounted() {
    this.getNowFormatDate();
    this.getEnterStatistics();
    this.getDateEnterStatistics()
  }
};
</script>

<style lang="scss" scoped>
.formBox {
  margin-top: 20px;
}
.chartBox {
  margin-top: 20px;

  padding: 0 10px;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      padding: 0;

      font-family: PingFangSC-Regular;

      font-size: 16px;

      color: #333333;

      margin: 10px 5px 15px;

      label {
        width: 6px;

        height: 15px;

        margin-right: 5px;

        background: #1ab394;

        display: inline-block;

        vertical-align: bottom;
      }
    }
  }

  .chart {
    background: #fff;

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

    padding: 10px;
    .nodata{
      text-align: center;
  font-size: 19px;
  color: #999999;
  line-height: 25px;
  margin: 40px 0 20px 0;
  letter-spacing: 1px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
  }
}
</style>
